<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>

    <script src="js/axios.min.js"></script>

    <script src="//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-row>
            <el-col span="12">
                <h1>全球新型冠状病毒实时数据统计</h1>
            </el-col>
            <el-col span="4">
                <p style="margin-bottom: 2px">全球累计确诊</p>
                <h2 style="margin-top: 0;margin-bottom: 0">{{total}}</h2>
            </el-col>
            <el-col span="4">
                <p style="margin-bottom: 2px">较昨日新增</p>
                <h2 style="margin-top: 0;margin-bottom: 0">{{added}}</h2>
            </el-col>
        </el-row>
        <p style="font-size: small;margin-bottom: 0;">统计截止：{{lastTime}}</p>
        <HR align=center width=100% color=#66ccff SIZE=1>
        <el-row>
            <el-col span="12">
                <el-form inline="true">
                    <el-form-item label="搜索：" style="margin-bottom: 0">
                        <el-input
                                placeholder="请输入省/洲"
                                v-model="s_p_s"
                                size="small">
                        </el-input>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0">
                        <el-input
                                placeholder="请输入国家/地区"
                                v-model="s_c_r"
                                size="small">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <el-table
                            :data="data"
                            style="width: 100%">
                        <el-table-column
                                prop="provinceOrState"
                                label="省/洲"
                                sortable>
                        </el-table-column>
                        <el-table-column
                                prop="countryOrRegion"
                                label="国家/地区"
                                sortable>
                        </el-table-column>
                        <el-table-column
                                prop="totalPat"
                                label="累计确诊"
                                sortable>
                        </el-table-column>
                        <el-table-column
                                prop="currAdd"
                                label="较上日新增"
                                sortable>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col span="12">
                <ve-map :data="chartData" :settings="chartSettings" :events="chartEvents"></ve-map>
                <ve-line :data="accumulateData"></ve-line>
                <ve-line :data="dayAddData"></ve-line>
            </el-col>
        </el-row>
    </el-row>
</div>
<script>
    new Vue({
        el: '#app',
        data: function () {
            this.chartSettings = {
                position: 'world',
                // selectData: true,
                roam:true,
                label: false,
                selectedMode: 'single'
            }
            this.chartEvents = {
                click: (v) => {
                    console.log(v.name);
                    this.s_c_r = v.name;
                }
            }
            return {
                data: '',
                accumulateData: '',
                dayAddData:'',
                s_p_s: '',
                s_c_r: '',
                total: '',
                added: '',
                lastTime:'',
                chartData: ''
            }
        },
        created: function () {
            this.getTotal();
            this.getData(0, 0);
            this.getAccumulateData();
            this.getDayAddData();
            this.getCountryData();
        },
        watch: {
            s_p_s: function (val, oldVal) {
                this.getData(val, this.s_c_r);
            },
            s_c_r: function (val, oldVal) {
                this.getData(this.s_p_s, val);
            }
        },
        methods: {
            getTotal() {
                let self = this;
                axios({
                    url: '/total',
                    method: 'get'
                }).then(
                    res => {
                        self.total = res.data.total;
                        self.added = res.data.added;
                        self.lastTime = res.data.lastTime;
                    }
                )
            },
            getData(s_p_s, s_c_r) {
                let self = this;
                if (s_p_s === '') s_p_s = '0';
                if (s_c_r === '') s_c_r = '0';
                axios({
                    url: '/data/' + s_p_s + '/' + s_c_r,
                    method: 'get'
                }).then(
                    res => {
                        self.data = res.data;
                    }
                )
            },
            getAccumulateData() {
                let self = this;
                axios({
                    url: '/accumulate',
                    method: 'get'
                }).then(
                    res => {
                        self.accumulateData = res.data;
                    }
                )
            },
            getDayAddData() {
                let self = this;
                axios({
                    url: '/dayAdd',
                    method: 'get'
                }).then(
                    res => {
                        self.dayAddData = res.data;
                    }
                )
            },
            getCountryData() {
                let self = this;
                axios({
                    url: '/countryTotal',
                    method: 'get'
                }).then(
                    res => {
                        self.chartData = res.data;
                    }
                )
            }
        }
    });
</script>
</body>
</html>
